<template>
	<view class="index-content">
<!-- 搜索板块 -->
		<view class="index-header">
			<view class="icon_header">
				<view class="index-search" >
					<navigator url="/pages/search">
						<view class="icon_search">
							<text>请输入您需要搜索的商品</text>
						</view>
					</navigator>
				</view>
			</view>
			<view class="index_search"> 搜索</view>
		</view>
<!-- 搜索板块 -->
<!-- banner板块 -->
		<view class="index-banner">
			<view class="swiper">
				<swiper class="swiper-container" :autoplay="true" :interval="4000" :circular="true" :indicator-dots="true"
				 indicator-active-color="#FC3F78" indicator-color="#cccccc">
						<swiper-item class="swiper-wrapper">
							<img src="../static/banner.jpg" ></img>
						</swiper-item>
						<swiper-item class="swiper-wrapper">
							<img src="../static/banner.jpg"></img>
						</swiper-item>
						<swiper-item class="swiper-wrapper">
							<img src="../static/banner.jpg"></img>
						</swiper-item>
				</swiper>
			</view>
		</view>
<!-- banner -->
<!-- 导航栏板块 -->
		<view class="index-navlist ">
			<view class="has-pdtb-5" v-for="(nav,index) in navlist" :key="index">
				<navigator :url="'/pages/list?id='+nav.id"> 
				<image :src="nav.src"></image>
				<view class="is-size-14">{{nav['title']}}</view>
				</navigator>
			</view>
		</view>

<!-- 导航栏板块 -->
<!-- 内容 -->
		<view class="uni-product-list">
		    <view class="uni-product" v-for="(item,index) in couponlist" :key=index >
				<navigator :url="'/pages/info?id='+item.wares_id"> 
					<view class="image-view">
						<image class="uni-product-image" :src="JSON.parse(item.wares_masterimg)[0]"></image>
					</view>
					<view class="uni-product-title">{{item.wares_title}}</view>
					<view class="uni-product-price">
						<text class="uni-product-price-favour">￥{{item.wares_nowprice}}</text>
						<text class="uni-product-price-original">￥{{item.wares_oldprice}}</text>
					</view>
				</navigator>
		    </view>
		</view>
<!-- 内容 -->
	</view>
</template>

<script>
	import uniNavBar from "@/components/uniapp/uni-nav-bar/uni-nav-bar.vue"
	export default {
		data() {
			return {
				couponlist:[],
				navlist: [
					 { id: 1, title: '限时白嫖', href: '/list', src: '../static/type_1.png' },
					  { id: 2, title: '新品推荐', href: '/list', src: '../static/type_2.png' },
					  { id: 3, title: '低价高配', href: '/list', src: '../static/type_3.png' },
					  { id: 4, title: '超值特卖', href: '/list', src: '../static/type_4.png' }
				],
			}
		},
		methods: {
			async getHome() {
				var data = await this.$http.homeService.getHomeData({});
				this.couponlist = data.result
			},
		},

		created(){
			this.getHome();

		},
	}
</script>

<style lang="stylus" scoped>
@import "../common/styl/page/index.styl"
.status_bar
	height: var(--status-bar-height);
	width: 100%;
</style>
